<template>
  <div style="width:100%;height: 100%;background-color: #fff;">
    <div id="graph-blue" ref="graphChart" style="width: 95%;height: 95%;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import info from "./3.json";
export default {
  data() {
    return {
      myChart: null
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.myChart = echarts.init(document.getElementById("graph-blue"))

      const categories = info.categories;

      info.links.forEach((link) => {
        if (link.type === 2) {
          link.lineStyle = {
            color: '#919193',
          };
        } else {
          link.lineStyle = {
            // color: '#d7d8d7',
            color: '#fff', opacity: 0
          };
        }
      });

      info.nodes.forEach((node) => {
        if (node.type === 2) {
          node.label = {
            show: true,
            position: 'bottom',
            fontSize: 15,
          };
        } else {
          node.label = {
            show: false
          };
        }
      });

      let option = {
        legend: [
          {
            show: false,
            top: 20,
            orient: 'vertical',
            right: 0,
            data: categories.map((x) => x.name),
          },
        ],
        nodeScaleRatio: 1,
        series: [
          {
            type: 'graph',
            layout: 'force',
            symbolSize: 50,
            // 拖拽节点
            draggable: true,
            zoom: 0.6,
            roam: true,
            // 凸显节点
            focusNodeAdjacency: true,
            legendHoverLink: true,
            categories: categories,
            // label: {
            //   show: true,
            //   position: 'bottom',
            //   fontSize: 13
            // },
            force: {
              // 开启动画
              layoutAnimation: true,
              // 动画渲染速度
              friction: 0.1,
              repulsion: 5500,
              edgeLength: 100,
            },
            //连接线的配置
            lineStyle: {
              color: '#969696',
              curveness: 0,
              width: 2,
              type: 'solid'
            },
            data: info.nodes,
            links: info.links,
          },
        ],
      };
      console.log(option)
      this.myChart.setOption(option, true)
    }
  }
}
</script>

<style>

</style>